<template>
  <dtDialog
    :title="textMap[dialogStatus]"
    :close-on-click-modal="false"
    :visible.sync="dialogVisible"
    :is-loading="loading"
    destroy-on-close
    @closeDialog="resetTemp"
    @comfirmBtn="handleConfirm"
  >
    <DtForm :form-opts="config" :width-size="1" :ref-obj.sync="config.ref" >
      <template #admingroupCascader>
        <el-cascader
          ref="cascader"
          v-model="config.formData.showUrl"
          :options="cascaderOpts"
          filterable
          :props="{
            value: 'menuId',
            label: 'menuName',
            children: 'children'
          }"
        />
      </template>
    </DtForm>
  </dtDialog>
</template>
<script>
import { uuId } from '@/framework/utils/uuid'
import { addSysMenuButton, editSysMenuButton } from '@/framework/api/menu'
import buttonConfigApi from '@/framework/api/developerCenter/application-system/buttonConfig'
import { isExternal } from '@/framework/utils/validate'

export default {
  data() {
    const validateUrl = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入链接地址'))
      } else if (!value.startsWith('/') && !isExternal(value)) {
        callback(new Error('链接地址必须以 https:// 或者 http:// 开头'))
      } else {
        callback()
      }
    }
    return {
      textMap: {
        create: '新增按钮',
        update: '修改按钮'
      },
      dialogStatus: '',
      dialogVisible: false,
      loading: false,
      rules: {

      },
      temp: {

      },
      config: {
        ref: null,
        labelWidth: '84px',
        formData: {
          formId: '',
          menuId: '',
          buttonName: '',
          buttonCode: '',
          actionType: 1,
          showUrl: '',
          url: '',
          pluginName: '',
          carryData: 1,
          remark: '',
          location: 1
        },
        labelPosition: 'right',
        columns: [
          {
            label: '名称',
            prop: 'buttonName',
            type: 'text',
            component: 'el-input',
            maxlength: 10
          },
          {
            label: '编码',
            prop: 'buttonCode',
            type: 'text',
            component: 'el-input',
            maxlength: 20
          },
          {
            label: '操作类型',
            prop: 'actionType',
            component: 'el-radio-group',
            type: 'radio',
            list: 'actionTypeList'
          },
          {
            label: '选择页面',
            prop: 'showUrl',
            type: 'text',
            component: 'el-input',
            maxlength: 10,
            slotName: 'admingroupCascader',
            isHideItem: false
          },
          {
            label: '链接地址',
            prop: 'url',
            component: 'el-input',
            type: 'textarea',
            maxlength: 100,
            isHideItem: true
          },
          {
            label: '执行类名',
            prop: 'pluginName',
            component: 'el-input',
            type: 'textarea',
            maxlength: 200,
            isHideItem: true
          },
          {
            label: '勾选数据',
            prop: 'carryData',
            component: 'el-radio-group',
            type: 'radio',
            list: 'carryDataList',
            isHideItem: true
          },
          {
            label: '描述',
            prop: 'remark',
            component: 'el-input',
            type: 'textarea',
            maxlength: 50
          }
        ],
        rules: {
          buttonName: [
            {
              required: true,
              trigger: 'blur',
              message: '请输入名称'
            }
          ],
          buttonCode: [
            {
              required: true,
              trigger: 'blur',
              message: '请输入编码'
            }
          ],
          actionType: [
            {
              required: true,
              trigger: 'change',
              message: '请选择操作类型'
            }
          ],
          showUrl: [
            {
              required: true,
              trigger: 'change',
              message: '请选择页面'
            }
          ],
          url: [
            {
              required: true,
              trigger: 'change',
              validator: validateUrl
            }
          ],
          pluginName: [
            {
              required: true,
              trigger: 'change',
              message: '请输入执行类名'
            }
          ]
        },
        listTypeInfo: {
          actionTypeList: [
            { label: '打开视图', value: 1 },
            { label: '打开链接', value: 2 },
            { label: '执行动作', value: 3 }

          ],
          carryDataList: [
            { label: '是', value: 1 },
            { label: '否', value: 0 }
          ]
        }
      },
      cascaderOpts: []

    }
  },
  watch: {
    'config.formData.actionType': {
      handler(newVal, oldVal) {
        // 处理选择其他操作类型后打开页面的字段显示问题
        const obj = {
          // url链接地址 showUrl选择页面 carryData执行类名
          1: ['url', 'pluginName', 'carryData'],
          2: ['showUrl', 'pluginName', 'carryData'],
          3: ['showUrl', 'url']
        }
        this.config.columns = this.config.columns.map((res) => {
          res.isHideItem = obj[newVal].includes(res.prop)
          return res
        })
      }
    }
  },
  methods: {
    openDialog(type, row, queryParams) {
      this.resetTemp()
      this.dialogVisible = true
      this.config.columns[1].disabled = false
      if (type == 'create') {
        this.dialogStatus = 'create'
        this.config.formData.buttonCode = uuId(8)
      } else {
        this.dialogStatus = 'update'
        this.config.columns[1].disabled = true
        buttonConfigApi.sysAcButtonDetail({ buttonId: row.buttonId }).then((res) => {
          this.config.formData = res.data
          if (res.data.actionType == 2) {
            this.$set(this.config.formData, 'url', row.showUrl)
          } else if (res.data.actionType != 3) {
            this.config.formData.pluginName = ''
          } else {
            this.$set(this.config.formData, 'url', '')
          }
        })
      }
      this.config.formData.formId = queryParams.formId
      this.config.formData.menuId = queryParams.menuId
      this.getPage(queryParams.appId)
    },
    resetTemp() {
      this.config.formData = {
        formId: '',
        menuId: '',
        buttonName: '',
        buttonCode: '',
        actionType: 1,
        showUrl: '',
        url: '',
        pluginName: '',
        carryData: 1,
        remark: '',
        location: 1
      }
      if (this.config.ref) {
        this.config.ref.resetFields()
      }
    },
    handleConfirm() {
      this.config.ref.validate((valid) => {
        if (valid) {
          try {
            this.loading = true
            if (this.config.formData.actionType == 1) {
              if (Array.isArray(this.config.formData.showUrl)) {
                this.config.formData.showUrl = this.config.formData.showUrl.join(',')
              }
            } else if (this.config.formData.actionType == 2) {
              this.config.formData.showUrl = this.config.formData.url
            }
            const func = this.dialogStatus == 'create' ? buttonConfigApi.lowCodeAddButton : editSysMenuButton
            func(this.config.formData).then((res) => {
              this.$dtMessage({
                message: this.dialogStatus == 'create' ? '新增成功' : '修改成功',
                type: 'success'
              })
              this.$parent.getList()
              this.dialogVisible = false
              this.loading = false
            }).catch(() => {
              this.loading = false
            })
          } catch (error) {
            this.loading = false
          }
        }
      })
    },
    getPage(appId) {
      buttonConfigApi.queryButtonMenuList({ appId }).then((res) => {
        this.cascaderOpts = res.data
      })
    }
  }
}
</script>
